<!-- 数据集卡片 -->
<template>
  <div
    class="box"
    :class="[data?.createType === 1 && 'shared']"
    :style="{ width: typeof cardWidth === 'string' ? cardWidth : cardWidth + 'px', height: cardHeight + 'px' }"
    @click.stop="onClickCard(data)"
  >
    <div class="box-example"></div>
    <div class="head">
      <div class="head-up">
        <div class="left-title">
          <div class="title-icon"><i class="iconfont icon-a-shujuku_jurassic2"> </i></div>
          <span class="elliptical-1 title-text" :title="data?.name">{{ data?.name }}</span>
        </div>
        <div class="head-right">
          <slot name="head-right">
            <div class="collect" @click.stop>
              <collect-button
                :msg="collectButtonCancelMsg"
                :show-default-text="false"
                :default-status="data?.isFavorite"
                :favorite-obj-id="data?.id"
                :favorite-obj-name="data?.name"
                :favorite-obj-type="3"
                @on-click="setCollect(data)"
                @click-ok="ok"
              />
            </div>
          </slot>
        </div>
      </div>
      <div class="head-down" :title="data?.description">{{ data?.description }}</div>
    </div>
    <div class="bottom">
      <div class="bottom-double-box">
        <div class="info">
          <div class="elliptical-1">
            <span class="bottom-text label">大小</span>
            <span class="elliptical-1 value" :title="`大小:${sizeFilter(data?.size || 0)}`">
              {{ sizeFilter(data?.size || 0) }}
            </span>
          </div>
          <div class="elliptical-1">
            <span class="bottom-text label">文件数</span>
            <span class="elliptical-1 value" :title="`文件数:${data?.fileNum}`">{{ data?.fileNum }}</span>
          </div>
        </div>
        <div class="tool fc gap-6" @click.stop="handleToDownload(data)">
          <i class="iconfont icon-download-2-line"></i>
          下载
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { debounce, sizeFilter } from 'g6-fn'

  import CollectButton from '../CollectButton/index.vue'

  export interface DataSetCardData {
    id?: string
    name?: string // 名称
    isFavorite?: boolean // 是否收藏
    description?: string //描述
    size?: number // 大小
    fileNum?: number // 数量
    createType?: number // 创建类型
    readOnly?: number // 数据权限 0只读 1读写
  }

  export interface DataSetCardProps {
    data?: DataSetCardData | null
    cardWidth?: number | string
    cardHeight?: number
    collectButtonCancelMsg?: string
  }

  withDefaults(defineProps<DataSetCardProps>(), {
    data: () => {
      return {
        id: '',
        name: '',
        isFavorite: false,
        description: '',
        size: 0,
        fileNum: 0
      }
    },
    cardWidth: 329,
    cardHeight: 170,
    collectButtonCancelMsg: '是否取消收藏此数据集？',
    clickOk: () => {
      console.log('')
    }
  })

  const emits = defineEmits(['onClick', 'onDownload', 'onCollect', 'okCancel'])

  const onClickCard = (item: DataSetCardData | null) => {
    emits('onClick', item)
  }

  /**
   *  两个方法，一个是进行数据集的收藏和取消
   * */
  const setCollect = (item: DataSetCardData | null) => {
    emits('onCollect', item)
  }

  //下载
  const handleToDownload = debounce((item: DataSetCardData | null) => {
    emits('onDownload', item)
  }, 500)

  // 确认取消
  const ok = () => {
    emits('okCancel')
  }
</script>
<style lang="less" scoped>
  .box {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #fff;
    border: 1px solid @border1;
    border-bottom: none;
    border-radius: 10px;
    transition: all 0.2s;
    flex-direction: column;
    cursor: pointer;

    .box-example {
      position: absolute;
      top: 20px;
      left: 0;
      width: 3px;
      height: 22.957px;
      background: @primary1;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }

    .head {
      padding: 20px 24px;
      width: 100%;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);

      .head-up {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        gap: 0 8px;
        margin-bottom: 12px;

        .left-title {
          display: flex;
          align-items: center;
          min-width: 0;
          height: 24px;
          gap: 8px;

          .title-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 20px;
            height: 20px;
            background: #f5f5f5;
            border-radius: 50%;

            .iconfont {
              font-size: 10px;
              color: @primary1;
            }
          }

          .title-text {
            max-width: 100%;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.75);
            line-height: 24px; /* 150% */
          }
        }

        .head-right {
          display: flex;
          align-items: center;
          gap: 8px;

          .head-right-line {
            width: 0.5px;
            height: 12px;
            background: rgba(0, 0, 0, 0.05);
          }

          .collect,
          .load {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 16px;
            gap: 6px;
            border-radius: 6px;
          }
        }
      }

      .head-down {
        display: -webkit-box;
        overflow: hidden;
        height: 44px;
        font-size: 14px;
        font-family: 'Noto Sans SC';
        text-overflow: ellipsis;
        line-height: 22px;
        color: var(--text-text-02, rgba(25, 25, 48, 0.75));
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        align-self: stretch;
        font-style: normal;
        font-weight: 400;
      }
    }

    .bottom {
      overflow: hidden;
      width: 100%;
      height: 50px;

      .bottom-double-box {
        width: 100%;
        height: 100px;
        transform: translateY(0);
        transition: transform 0.2s;

        .info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
          height: 50px;
          align-self: stretch;

          & > div {
            display: flex;
            align-items: center;
            gap: 4px;

            .label {
              font-size: 14px;
              font-family: 'Noto Sans SC';
              color: rgba(0, 0, 0, 0.45);
              font-weight: 400;
              font-style: normal;
              line-height: 22px; /* 157.143% */
            }

            .value {
              color: rgba(0, 0, 0, 0.75);
              font-weight: 700;
            }
          }
        }

        .tool {
          height: 50px;
          color: #fff;
          background: @primary1;
          border-top: 0.5px solid @border1;
        }
      }
    }

    &:hover {
      box-shadow: 0 9px 17px #25252d1f, 0 3.75998px 7.10219px #25252d16, 0 2.01027px 3.79717px #25252d12, 0 1.12694px 2.12866px #25252d0f,
        0 0.598509px 1.13052px #25252d0c, 0 0.249053px 0.470434px #25252d09;

      .head {
        .head-up {
          .left-title {
            .title-text {
              color: @primary1;
              font-weight: 700;
            }
          }
        }
      }

      .bottom {
        .bottom-double-box {
          transform: translateY(-50%);
        }
      }
    }

    // 被分享的数据集
    &.shared {
      .box-example {
        background: @warning;
      }

      .head {
        .head-up {
          .left-title {
            .title-icon {
              .iconfont {
                color: @warning;
              }
            }
          }
        }
      }

      &:hover {
        .head {
          .head-up {
            .left-title {
              .title-text {
                color: @warning;
                font-weight: 700;
              }
            }
          }
        }
      }
    }
  }
</style>
